<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    #con1 {
      width: 500px;
      height: 500px;
      background: red;
      display: flex;
    }
    #con0 {
      width: 700px;
      height: 700px;
      background: rgb(13, 255, 0);
      margin: auto;
    }
    #con2 {
      width: 300px;
      height: 300px;
      background: blue;
      margin: auto;
    }
  </style>
  <body>
    <!-- <div id="con0" onclick="fun0()">
      <div id="con1" onclick="fun()">
        <div id="con2" onclick="fun1()"></div>
        <a href="http://www.baidu.com">我是百度</a>
      </div>
      <form action="http://www.baidu.com">
        <input type="submit" onclick="fun()" />
      </form>
    </div> -->
    <div id="con0">
      <div id="con1">
        <div id="con2"></div>
      </div>
    </div>
    <a href="4.26-bom.html">tkajsdkas </a>
    <button id="anniu">anniu</button>
  </body>
  <script>
    window.onload = function () {
      document.getElementById('con2').addEventListener('click', fun2, true)
      //true代码捕获型事件 false 冒泡型事件
      document.getElementById('con1').addEventListener('click', fun, true)
      document.getElementById('con0').addEventListener('click', fun0, true)
      //   anniu.onclick = function () {
      //     console.log(8888)
      //   }
      //   anniu.onclick = function () {
      //     console.log(9999)
      //   }
      //   document.getElementById('anniu').onclick = function () {
      //     console.log('dom1')
      //   }
      //   document.getElementById('anniu').onclick = function () {
      //     console.log('dom2')
      //   }
      document.getElementById('anniu').addEventListener('click', fun0, false)
      document.getElementById('anniu').addEventListener('click', fun, true)
      document.getElementById('anniu').removeEventListener('click', fun, true)
    }
    function fun0() {
      window.history.forward()
      //   event.preventDefault() //阻止默认事件
      console.log('我是div - con0 ')
    }
    // 阻止默认事件 ：例如 a标签 form表单提交时会自动跳转页面 如果在相应的函数内使用preventDefault会
    function fun() {
      //   event.preventDefault() //阻止默认事件
      console.log('我是div - con1 -submit')
    }
    function fun2() {
      console.log('我是div - con2')
      //event.stopPropagation()
    }
    //事件冒泡 就是触发重叠部分的父级事件
  </script>
</html>
